<%--
  Created by IntelliJ IDEA.
  User: 84361
  Date: 2020/6/12
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>角色</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<table id="roleTable" lay-filter="roleTable"></table>
<script type="text/html" id="roleToolbar">
    <div style="position: relative">
        <form class="layui-form" style="float: left">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="account" class="layui-input" placeholder="请输入职位名">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 40%">真实姓名</label>
                <div class="layui-input-inline" style="width: 60%">
                    <input  type="text" name="real_name" class="layui-input" placeholder="请输入真实姓名">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-inline">
                    <select name="role_id" id="r" >
                        <option value=""></option>
                        <c:forEach items="${sessionScope.roles}" var="role">
                            <option value="${role.id}">${role.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="position: absolute;left: 800px;z-index: 10">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="query"  lay-submit>查询</button>
                </div>
            </div>
        </form>
        <div class="layui-inline" style="position: absolute;left: 900px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="add" lay-event="add" >添加</button>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="innerToolBar">
    <div class="layui-btn-container"><%--定义一个按钮组--%>
        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>

    </div>
</script>
<%--引入js--%>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>

    //layui引入特定模块的方式
    layui.use(['layer', 'form','table','jquery'], function () {
        var layer = layui.layer//layer 弹窗对象
            , form = layui.form;//表单对象
        var table=layui.table;
        var $=layui.$;//引入jquery
        //表单提交事件监听 submit(触发submit的按钮的lay-filter)
        form.on('submit(query)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //重新加载表格
            table.reload("roleTable",{
                where:{//查询条件
                    params:data.field// 会封装到LayRequest中的params中去
                },
                page:{
                    curr:1//当前页
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        table.render({
            elem:"#roleTable",
            url:"${pageContext.request.contextPath}/users/list",
            toolbar: '#roleToolbar',   //开启头部工具栏
            defaultToolbar: [],//右侧工具栏
            cols:[[//定义列信息
                {type:'numbers', fixed: 'left'},
                {field:"account",title:"用户名",width:80},//一列数据项
                {field:"real_name",title:"真实姓名",width:80},//一列数据项
                {field:"phone_number",title:"电话号码",width:120},//一列数据项
                {field:"email",title:"电子邮件",width:120},//一列数据项
                {field:"role_id",title:"职位",width:80,templet: function(res){
                    return res.role.name
                    }},//一列数据项
                {field:"create_time",title:"创建时间",width:130},//一列数据项
                {field:"last_login_time",title:"上一次登录",width:130},
                {field:"status",title:"锁定状态",width:110, templet: '#switchTpl', unresize: true,templet: function(res){
                        var status =  res.status
                        var check = status===1 ? 'checked = checked':'';
                        return "<input type='checkbox' perid='"+res.id+"' value='" + status + "' id='status' lay-filter='status' lay-event='status' " + check +" name='status'  lay-skin='switch' lay-text='正常|锁定' >";
                    }},
                {fixed: 'right', title:'操作', toolbar: '#innerToolBar', width:200}//表格内操作栏
            ]],
            page:true
        })
        <%--//监听状态操作--%>
        form.on('switch(status)', function(){
            layer.msg("你没有权限");
        });


//监听头部工具栏事件
        // toolbar(table的lay-filter)
        table.on('toolbar(roleTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);//获取到选中的内容
            switch(obj.event){// 工具栏中按钮的 lay-event属性的值
                case 'add':
                    //弹出层
                    layer.open({
                        title:"角色新增",//标题
                        type:2,// 2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/users/add.jsp",
                        area: ['600px', '500px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;

            };
        });
        //行内操作栏监听事件
        table.on('tool(roleTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data;  //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            switch (layEvent) {
                case 'delete':
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/users/delete",
                            type:"post",
                            data:{id:data.id},
                            dataType: "json",
                            success:function (result) {
                                if (result.code==0){
                                    layer.msg("删除成功")
                                    window.location.reload();
                                }
                            }
                        })
                        layer.close(index);
                    });

                    //todo 发ajax请求异步删除数据
                    break;
                case 'edit':
                    // layer.msg("编辑")

                    layer.open({
                        title:"角色修改",//标题
                        type:2,// 2 为iframe层，可以加载其他的页面到弹出层中
                        content:"${pageContext.request.contextPath}/users/toUpdate?id="+data.id,
                        area: ['500px', '400px'],//定义宽高
                        maxmin:true//可以最大化
                    })
                    break;
            }

        })
    });
</script>
</body>
</html>
